<template>
  <div>
    <div class="top">
      <van-nav-bar title="通过安全问题找回密码" left-text="返回" left-arrow
      @click-left="onClickLeft"/>
      <van-divider />
    </div>
    <div class="banner">
      <!-- 输入任意文本 -->
       <van-field label="证件类型" value="二代身份证" readonly />
      <!-- 输入身份证-->
<van-field v-model="tel" type="tel" label="证件号码" placeholder="注册时填写的证件号码"/>
    </div>
    <div class="Tips">
      <p class="Tiss1">温馨提示：</p>
      <p class="Tiss2">如果您尚未绑定证件号，则无法通过此方式找回密码，您可使用绑定的手机号找回密码。</p>
    </div>
    <div class="Tips-a">
      <van-button type="info" style="width: 335px;" @click="nex">下一步</van-button>
      <van-button type="default" class="phone">手机号找回密码</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tel: '',
      text: '',
    };
  },
methods: {
 
    onClickLeft() {
       this.$router.push({path:'Mobile'})
    },
    nex(){
       this.$router.push({path:'snp'})
    }
  },
}
</script>

<style scoped>
.banner{
  margin-top: 4%;
}
.Tips{
color: rgba(80, 80, 80, 1);
	font-size: 12px;
	line-height: 150%;
	text-align: left;
  margin-left: 5%;
}
.Tiss1{
  color: rgba(255, 141, 26, 1);
	font-size: 12px;
	line-height: 150%;
	text-align: left;
}
.Tiss2{
  width: 313px;
  color: rgba(80, 80, 80, 1);
	font-size: 12px;
	line-height: 150%;
	text-align: left;
}
.Tips-a{
  text-align: center;
  margin-top: 20px;
}
.phone{
  /* width: 160px;
  height: 30px; */
  margin-top: 40px;
  color: rgba(42, 130, 228, 1);
  border: 1px solid rgba(42, 130, 228, 1);
  border-radius: 6px;
  padding: 20px 60px;
}
</style>